import React, { useEffect, useRef } from 'react'
import { Form, Input, Button } from 'antd-mobile'
import InputPass from './InputPass';
import { ShowMsg } from '../utils/message';
import { useNavigate, useSearchParams, Link } from 'react-router-dom';
import { useLocalStorageState } from 'ahooks'
import { Ajax } from './../api/api';
import { useSelector } from 'react-redux';

const LoginByName = () => {
    const [form] = Form.useForm()
    const formRef: any = useRef()
    const router = useNavigate()
    const [query] = useSearchParams()
    const fromPath = useSelector((state: any) => state.data.fromPath)
    const [appaccount, setAppAccount] = useLocalStorageState<string | number | undefined>(
        'appaccount',
    );
    const [appToken, setAppToken] = useLocalStorageState<string | number | undefined>(
        'appToken',
    );
    const [appPhone, setAppPhone] = useLocalStorageState<string | number | undefined>(
        'appPhone',
    );


    const onFinish = async (value: any) => {
        let res = await Ajax.login(value) as any;
        if (res.code == 200) {
            console.log(fromPath)
            var fromName = fromPath.length >= 2 ? fromPath[fromPath.length - 2] : '';
            if (fromName == '/reg' || fromName == '/findpass') {
                router('/app/mine')
            } else {
                router(-1)
            }
            setAppAccount(value.account)
            setAppPhone(res.result.phone)
            sessionStorage.setItem('appToken', res.token)
        }
    }
    const onFinishFailed = () => {
        ShowMsg('请输入有效的登录数据')
    }
    const resetForm = () => {
        form.resetFields()
    }


    useEffect(() => {
        if (query.get('username')) {
            form.setFieldValue('account', query.get('username'))
        } else {
            form.setFieldValue('account', appaccount)
        }

    }, [])
    return (
        <div className='pd10'>
            <Form
                form={form}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                layout={'horizontal'}
                ref={formRef}
                initialValues={{

                }}
                footer={
                    <div>
                        <Button block type='submit' color='success' size='middle'>
                            登录
                        </Button>
                        <Button block onClick={resetForm} className='mt10' color='danger' size='middle'>
                            重置
                        </Button>
                    </div>
                }
            >
                <Form.Header>用户名或者手机号都可以登录</Form.Header>
                <Form.Item
                    name='account'
                    label='账号'
                    rules={[{ required: true }]}
                >
                    <Input placeholder='请输入账号' clearable />
                </Form.Item>
                <InputPass
                    name='password'
                    label='密码'
                    placeholder='请输入密码'
                />
                <Form.Item >
                    <div className="links flex ">
                        <Link to='/reg' className='link1'>注册账号</Link>
                        <Link to='/findpass' className='color2'>找回密码</Link>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
}

export default LoginByName